<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="router.back()">返回主页</el-button>
    </div>
    <div
        style="font-size: 20px;font-weight: bold;color: red;text-decoration: underline;font-style: italic;margin-bottom: 20px">
      欢迎
    </div>

    <div style="font-size: 30px;margin-bottom: 20px">
      {{ a }} {{ b }}
    </div>
    <div style="margin-bottom: 20px">
      {{ data.a }}
      {{ data.b }}
      {{ data.c }}
    </div>

    <div style="margin-bottom: 20px">
      <input v-model="data.a">
    </div>
    <div style="margin-bottom: 20px">
      <span style="color: red" v-if="data.name==='佩奇'">小猪佩奇</span>
      <span style="color: blue" v-if="data.name==='乔治'">小猪乔治</span>
      <span style="color: pink" v-else>小猪多多</span>

    </div>
    <div>
      <div @click="show(item)" v-for="item in data.arr"
           style="background-color: lightblue;font-size: medium;font-weight: bold;margin-right: 20px">{{ item }}
      </div>
    </div>
    <select style="margin-bottom: 20px">
      <option v-for="item in data.fruit">{{ item }}</option>
    </select>

    <div style="margin-bottom: 20px">
      <button v-on:click="click">点我加好友</button>
      <button @click="click">点击一下</button>
    </div>
    <div style="margin-bottom: 20px">
      <div :style="data.box"></div>
      <img :src="data.img" alt="">
    </div>
    <div :style="{ 'margin-bottom':'20px'}">
      <div class="mb-4">
        <el-button>Default</el-button>
        <el-button type="primary" plain size="large">Primary</el-button>
        <el-button @click="clickDate" type="success" color="green">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
      </div>
    </div>
    <div :style="{'margin-bottom':'20px'}">
      <el-icon size="30px">
        <Edit/>
      </el-icon>

      <span style="margin-left: 30px;color: lightblue">
            <el-icon size="30" style="top: 8px"><View/></el-icon>100
     </span>
      <el-input
          v-model="data.input1"
          style="width: 240px;margin-left: 10px"
          placeholder="Please Input"
          :suffix-icon="Search"
      />
      <el-button type="danger" :icon="Delete" circle style="margin-left: 20px"/>
    </div>
  </div>
</template>


<script setup>
import {reactive, ref, onMounted} from "vue";
import {Edit, Search, Delete} from "@element-plus/icons-vue";
import router from "@/router/index.js";

const a = ref(1)
const b = ref(2)

const data = reactive({
  id: router.currentRoute.value.query.id,
  name2: router.currentRoute.value.query.name,
  a: 123,
  b: 456,
  c: 789,
  name: "多多",
  arr: [1, 2, 3],
  fruit: ['苹果', '香蕉', '栗子'],
  box: {
    width: '200px',
    height: '300px',
    backgroundColor: 'yellow',
  },
  img: 'https://www.baidu.com/favicon.ico',
  input1: '……',
});
console.log('获取到传递过来的id=' + data.id + '和name=' + data.name2)
const show = (value) => {
  alert(value);
}
const click = () => {
  alert("好友+1！");
}
const clickDate = () => {
  alert("点击按钮");
}
onMounted(() => {
  console.log('页面加载完成')
})

</script>